// 首页独有样式文件
// 1. 可以再此less文件导入其它less文件
// @import 导入的意思 可以把一个样式文件里的样式全部导入另一个样式文件中
// link: 引入某个css文件
@import "common";

// pc页面字体大小
@baseFont: 50;

body {
  // 设计稿宽度15等分
  width: 15rem;
  // 最小宽度
  min-width: 320px;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  background: #F2F2F2;
  height: 1200px;
}

// 1. 顶部搜索框
.search-content {
  display: flex;
  position: fixed;
  top: 0;
  // 居中对齐
  left: 50%;
  transform: translate(-50%);
  width: 15rem;
  height: 88rem / @baseFont;
  background: #FFC001;

  // 分类图标
  .classify {
    width: 44rem / @baseFont;
    height: 70rem / @baseFont;
    margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
    background: url(../images/classify.png) no-repeat;
    // 背景缩放
    background-size: 44rem / @baseFont auto;
  }

  // 中间盒子独自占一份
  .search {
    flex: 1;

    input {
      width: 100%;
      // 边框处理 不需要边框
      border: 0;
      // 去除点击高光
      outline: none;
      height: 66rem / @baseFont;
      margin-top: 12rem / @baseFont;
      padding-left: 55rem / @baseFont;
      // 小圆角 高度的一半
      border-radius: 33rem / @baseFont;
      color: #757575;
      font-size: 25rem / @baseFont;
      background-color: #FFF2CC;
    }
  }

  // 登录按钮
  .login {
    width: 75rem / @baseFont;
    height: 70rem / @baseFont;
    margin: 10rem / @baseFont;
    text-align: center;
    line-height: 70rem / @baseFont;
    color: #fff;
    font-size: 25rem / @baseFont;
  }
}

// 2. banner部分
.banner {
  width: 750rem / @baseFont;
  height: 368rem / @baseFont;

  // 让图片随着banner大小变化而变化
  img {
    width: 100%;
  }
}

// 3. 广告部分
.ad {
  display: flex;

  // 将内部a平均等分
  a {
    flex: 1;

    // 让图片随着a的大小变化
    img {
      width: 100%;
    }
  }
}

// 4. nav导航部分
nav {
  width: 750rem / @baseFont;
  a {
    float: left;
    // 一共十个a标签 每5个放一行 750/5 = 150
    width: 150rem / @baseFont;
    height: 140rem / @baseFont;
    // 给父级标签设置text-aligin: center
    // 子元素会自动水平居中
    text-align: center;

    img {
      // img是行内元素需要转换成块级元素
      display: block;
      // 图片大小是 82*82
      width: 82rem / @baseFont;
      height: 82rem / @baseFont;
      margin: 10rem / @baseFont auto 0;
    }

    span {
      display: block;
      margin-top: 6rem / @baseFont;
      color: #333;
      font-size: 25rem / @baseFont;
    }
  }
}